<!-- 我的 -->
<template>
	<view class="my-page">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<!-- 用户头像 -->
		<view class="nav-user">
			<view class="user">
				<!-- 用戶頭像 -->
				<view class="user-img" @click="headlerUserInfo()">
					<image src="../../../光智慧/static/logo.png" mode=""></image>
				</view>
				<!-- 用戶名稱 -->
				<view class="user-text" @click="headlerUserInfo()">
					jiu chen
				</view>
				<!-- 切換房子 -->
				<view class="user-switch" @click="headlerSwitch()">
					<view class="switch-icon">
						>
					</view>
					<view class="switch-text">
						切换房子
					</view>
				</view>
			</view>
			<!-- 活动群组，家庭成员 -->
			<view class="actives-member">
				<view class="actives">
					<view class="actives-num">
						3
					</view>
					<view class="actives-text">
						活动群组
					</view>
				</view>
				<view class="bg-null"></view>
				<view class="member">
					<view class="member-num">
						5
					</view>
					<view class="member-text">
						家庭成员
					</view>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="my-order">
			<view class="my-order-text" @click="myOrder()">
				<view class="order-text_1">
					我的订单
				</view>
				<view class="order-text_2">
					查看 >
				</view>
			</view>
			<!-- 宫格 -->
			<view class="grid-box">
				<view class="grid" v-for="(item,index) in gridData" :key="index" @click="headlerGrid(index)">
					<view class="grid-img">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="grid-text">
						{{item.title}}
					</view>
				</view>
			</view>
			<view style="height: 28rpx;"></view>
			<!-- 详情 -->
			<view class="details">
				<view class="details-dis" v-for="(item,index) in detailsData" :key="index" @click="headlerDetails(index)">
					<view class="details-img">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="details-text">{{item.title}}</view>
					<view class="details-right">></view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;width: 100rpx;background-color: #F9F9F9;"></view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gridData:[
					{icon:'../../static/imgs/evaluated.png',title:'全部订单'},
					{icon:'../../static/imgs/accepting.png',title:'受理中'},
					{icon:'../../static/imgs/visited.png',title:'待上门'},
					{icon:'../../static/imgs/orid.png',title:'待评价'},
				],
				detailsData:[
					{img:'../../static/imgs/我的房屋.png',title:'我的房屋'},
					{img:'../../static/imgs/授权管理.png',title:'授权管理'},
					{img:'../../static/imgs/在线客服.png',title:'在线客服'},
					{img:'../../static/imgs/意见反馈.png',title:'意见反馈'},
					{img:'../../static/imgs/更多设置.png',title:'更多设置'},
					{img:'../../static/imgs/帮助中心.png',title:'帮助中心'},
				],
			}
		},
		methods: {
			// 我的订单
			myOrder(){
				console.log(111);
			},
			// 宫格点击事件
			headlerGrid(index){
				console.log(index);
			},
			// 详情点击事件
			headlerDetails(index){
				console.log(index);
			},
			// 用户登录
			headlerUserInfo(){
				console.log(222);
			},
			// 切换房子
			headlerSwitch(){
				console.log(333);
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-page{
		background-color: #008FFF;
		height: calc(100vh - 100rpx);
		width: 100vw;
	}
	.nav-user{
		height: 444rpx;
		width: 100%;
	}
	.user{
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		padding-top: 162rpx;
	}
	.user-img{
		width: 110rpx;
		height: 110rpx;
		margin-left: 52.54rpx;
	}
	.user-img image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.user-text{
		height: 36rpx;
		margin-left: 24rpx;
		word-spacing: 22rpx;
	}
	.user-switch{
		width: 188rpx;
		height: 52rpx;
		background: #FFFFFF;
		opacity: 0.3;
		display: flex;
		border-radius: 13px;
		margin-left: auto;
		margin-right: 28rpx;
	}
	.switch-icon{
		width: 34rpx;
		margin-left: 20.84rpx;
		text-align: center;
	}
	.switch-text{
		height: 100%;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		margin-left: 19.92rpx;
		line-height: 52rpx;
	}
	
	.actives-member{
		height: 171.69rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-evenly;
		
	}
	.actives{
		text-align: center;
		color: #FFFFFF;
		font-family: Microsoft YaHei;
		font-weight: bold;
	}
	.actives-num{
		font-size: 54rpx;
		margin-bottom: 16.3rpx;
	}
	.actives-text{
		font-size: 28rpx;
	}
	.bg-null{
		width: 4rpx;
		height: 52rpx;
		background: #FFFFFF;
		opacity: 0.3;
		margin-bottom: 50.72rpx;
	}
	.member{
		text-align: center;
		color: #FFFFFF;
		font-family: Microsoft YaHei;
		font-weight: bold;
	}
	.member-num{
		font-size: 54rpx;
		margin-bottom: 16.3rpx;
	}
	.member-text{
		font-size: 28rpx;
	}
	// 我的订单
	.my-order{
		height: 1057rpx;
		background-color: white;
		margin-top: 25rpx;
		border-radius: 42rpx 42rpx 0rpx 0rpx ;
	}
	.my-order-text{
		padding-top: 58rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 22rpx;
	}
	.order-text_1{
		height: 28rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		padding-left: 60rpx;
	}
	.order-text_2{
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #999999;
		word-spacing: 4rpx;
		padding-right: 64rpx;
	}
	// 宫格
	.grid-box{
		width: 696rpx;
		height: 164rpx;
		box-shadow: 0rpx 4rpx 20rpx 4rpx #F5F5FA;
		border-radius: 18rpx;
		margin: auto;
		display: flex;
		justify-content: space-evenly;
		align-items: flex-start;
	}
	.grid{
		width: 96rpx;
		margin-top: 36rpx;
	}
	.grid-img{
		height: 52rpx;
		width: 46rpx;
		margin: auto;
	}
	.grid-img image{
		width: 100%;
		height: 100%;
		
	}
	.grid-text{
		width: 96rpx;
		height: 22rpx;
		font-size: 24rpx;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #666666;
		margin-top: 20rpx;
	}
	// 详情
	.details{
		width: 696rpx;
		// height: 610rpx;
		box-shadow: 0rpx 4rpx 20rpx 4rpx #F5F5FA;
		border-radius: 18px;
		margin: auto;
	}
	.details-img{
		width: 30rpx;
		height: 28rpx;
	}
	.details-img image{
		height: 100%;
		width: 100%;
		margin-top: 10rpx;
	}
	.details-text{
		width: 116rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		margin-left: 20rpx;
		color: #333333;
	}
	.details-right{
		margin-left: auto;
		margin-right: 18rpx;
	}
	.details-dis{
		display: flex;
		padding-top: 34rpx;
		padding-bottom: 34rpx;
		padding-left: 24rpx;
	}
</style>
